<template>
  <div class="safeTop">
    <div class="safe_arrow">
      <Arrow class="arrow" />
      <span class="safe_span">
        {{ props.toperMessage }}
      </span>
    </div>
  </div>
</template>

<script setup lang="ts">
import Arrow from '@/components/icon/Arrow.vue';
const props = defineProps(['toperMessage'])

</script>

<style>
.clone {
  width: 100%;
  height: 40px;
}

.safe_span {
  font-size: 15px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.safeTop {
  width: 100%;
  height: 40px;
  background-color: #ededed;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.safe_arrow {
  width: 100%;
  height: 30%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.arrow {
  position: absolute;
  display: none;
  left: -1%;
  width: 50px;
  height: 15px;
}
</style>
